<template>
    <div id="password">
        <Form>
            <FormItem label="账户:" prop="posts_title">
                <Input type="text" v-model="userAccount" disabled placeholder="请输入账户" style="width: 300px"/>
            </FormItem>
            <FormItem label="新密码:" prop="posts_title">
                <Input type="text" v-model="password" placeholder="请输入新密码" style="width: 300px"/>
            </FormItem>
            <!--<FormItem label="确认密码:" prop="posts_title">-->
                <!--<Input type="text" placeholder="请输入新密码" style="width: 300px"/>-->
            <!--</FormItem>-->
            <Button type="primary" class="btn" @click="getPublicKey()">提交</Button>
        </Form>

    </div>
</template>
<script>
    import API from '../../config/api'
    import qs from 'qs'
    export default {
        data(){
            return{
                password: '',
                userAccount: '',
                id: ''
            }
        },
        created(){
            let userData = this.$store.state.userData;
            this.id = userData.id;
            this.userAccount = userData.username
        },
        methods:{
            handleSubmit(pwd){
                let param = {
                    id: this.id,
                    password: pwd
                };
                this.axios.post(API.NOTIFY_PSW, qs.stringify(param)).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        this.$router.push({path:'/login'})
                    }
                })
            },
            getPublicKey(){
                this.axios.post(API.GET_PUBLIC_KEY).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        const entry=new JSEncrypt();
                        entry.setPublicKey(data.data);
                        const pwd= entry.encrypt(this.password);
                        this.handleSubmit(pwd)
                    }
                })
            }
        }
    }
</script>
<style>
    #password{
        display: flex;
        margin-top: 40px;
        justify-content: center;
        align-items: center;
    }
    .btn{
        margin-left: 50%;
        transform: translateX(-50%);
    }
</style>
